<template>
	<view class="container">
		<view class="topbox">
			<image class="topbg" src="/pages/business/static/tongz.png" mode=""></image>
			<view class="topcon">
				<view class="toptitle">
					通证余额
				</view>
				<view class="qiannum">
					{{userInfo.score}}
				</view>
				<view class="czbox">
					<view class="box_item">
						<view class="word">
							已让利总数
						</view>
						<view class="num">
							{{userInfo.setScore}}
						</view>
					</view>
					<view class="czline">

					</view>
					<view class="box_item">
						<view class="word">
							待让利订单
						</view>
						<view class="num">
							{{userInfo.setScoreOrder}}
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="con">
			<view class="title">
				通政让利
			</view>
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="scrolltolower">
				<view>
					<view class="minxitem" v-for="(item,index) in mxlist" :key="index">
						<image class="qian_icon" src="/static/img/tongz/zs.png" mode=""></image>
						<view class="item_right">
							<view class="right_top">
								<text>{{item.p_name}}</text>
								<text v-if="item.is_score==0" class="caoz"
									 @click="torl(item)">去让利</text>
								<text v-else class="caoz yi" @click="taodetail(item)">已让利</text>
							</view>
							<view class="time flex">
								<!-- createtime -->
								<!-- {{item.createtime}} -->
								{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM')}}
								<view class="status" v-if="item.status==1">
									待发货
								</view>
								<view class="status" v-if="item.status==2">
									已发货
								</view>
								<view class="status" v-if="item.status==3">
									已完成
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" @loadmore='scrolltolower' />
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import {
		getScoreOrder
	} from '@/api/my.js'
	export default {
		data() {
			return {
				userInfo: {},
				mxlist: [],
				page: 1,
				last_page: 1,
				triggered:true,
				status:'loadmore'
			}
		},
		methods: {
			clickto(url) {
				uni.$u.route(url);
			},
			getlist() {
				this.triggered=true
				getScoreOrder({
					page: this.page
				}).then(res => {
					this.last_page = res.data.data.list.last_page
					this.userInfo = res.data.data
					this.mxlist = [...this.mxlist, ...this.userInfo.list.data]
					this.triggered=false
					this.status='loadmore'
				})
			},
			scrolltolower() {
				// console.log(this.page)
				this.status='loading'
				this.page++
				if (this.page <= this.last_page) {
					this.getlist()
				}else{
					this.status='nomore'
				}
			},
			torl(item){
				uni.$u.route('/pages/tongz/interest', {
					product_id: item.p_id,
					our_product_id: item.id,
					refer:this.userInfo.refer,
					status:item.status
				});
			},
			taodetail(item){
				uni.$u.route('/pages/tongz/interestdetail', {
					product_id: item.p_id,
					our_product_id: item.id,
					refer:this.userInfo.refer,
					status:item.status
				});
			}
		},
		mounted() {

		},
		onLoad(data) {
			
		},
		onShow() {
			this.page=1
			this.mxlist=[]
			this.getlist()
		}
	}
</script>

<style lang="less">
	.container {
		padding: 40rpx 30rpx 20rpx;

		.topbox {
			width: 690rpx;
			height: 337rpx;
			position: relative;
			color: #fff;

			.topbg {
				position: absolute;
				top: 0;
				left: 0;
				width: 690rpx;
				height: 337rpx;
			}

			.topcon {
				height: 282rpx;
				width: 690rpx;
				position: absolute;
				top: 0;
			}

			.toptitle {
				font-size: 30rpx;
				padding-top: 57rpx;
				padding-left: 47rpx;
				margin-bottom: 24rpx;
			}

			.qiannum {
				font-size: 50rpx;
				font-weight: bold;
				padding-left: 46rpx;
				padding-bottom: 46rpx;
			}

			.czbox {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				padding: 0 73rpx;

				.czline {
					width: 1rpx;
					height: 29rpx;
					background: #FEFDFF;
					opacity: 0.2;
					margin: 0 76rpx;
				}

				.box_item {
					text-align: center;

					.word {
						color: #fff;
						font-size: 24rpx;
						// margin-bottom: 10rpx;
					}

					.num {
						color: #fff;
						font-size: 36rpx;
					}
				}
			}
		}
	}

	.title {
		font-size: 34rpx;
		color: #3F3F3F;
		font-weight: bold;
		margin-top: 44rpx;
		line-height: 40rpx;
	}

	.minxitem {
		display: flex;
		align-items: center;
		padding: 35rpx 0;
		border-bottom: 1rpx solid #DCDCDC;

		.qian_icon {
			width: 76rpx;
			height: 76rpx;
		}

		.item_right {
			padding-right: 20rpx;
			padding-left: 16rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.right_top {
				display: flex;
				justify-content: space-between;
				color: #333333;
				font-size: 26rpx;
				font-weight: bold;
				align-items: center;

				.caoz {
					width: 111rpx;
					line-height: 58rpx;
					background: #FC691F;
					border-radius: 10rpx;
					text-align: center;
					font-size: 26rpx;
					color: #FFFFFF;
				}

				.yi {
					background-color: #A7A7A6;
				}
			}

			.time {
				color: #A2A1A0;
				font-size: 24rpx;

				.status {
					width: 91rpx;
					line-height: 40rpx;
					background: #F7F6F6;
					border-radius: 10rpx;
					text-align: center;
					color: #A2A1A0;
					font-size: 23rpx;
					margin-left: 15rpx;
				}
			}
		}
	}

	.scroll-view {
		margin-top: 20rpx;
		height: calc(100vh - 40rpx - 44rpx - 382rpx - 40rpx - 20rpx - 44px - 20rpx);
		/* #ifdef MP */
		height: calc(100vh - 40rpx - 44rpx - 382rpx - 40rpx - 20rpx - 20rpx);
		/* #endif */
	}
</style>
